<template>
  <div>
    <div class="steamworks_direct_header_ctn">
      <div class="steamworks_direct_header">
        <span>Steam Direct</span><br>
        加入 Steamworks 分销计划
      </div>
    </div>
    <div style="background-color:#222;min-height:660px;">
      <el-tabs type="border-card" v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="介绍" name="0">
          <joinus_1></joinus_1>
        </el-tab-pane>
        <el-tab-pane label="输入名称和地址" name="1">
          <joinus_2 ref="joinus2"></joinus_2>
        </el-tab-pane>
        <el-tab-pane label="签订保密协议（NDA）" name="2">
          <joinus_3 ref="joinus3"></joinus_3>
        </el-tab-pane>
        <el-tab-pane label="支付金额" name="3">
          <joinus_4 :pay="payment"></joinus_4>
        </el-tab-pane>
        <el-tab-pane label="威威" name="4">
          w我
        </el-tab-pane>
        <div class="page_controls">
				<span class="btn_green_white_innerfade btn_medium" @click="Next">
			<span>{{ nextMsg }}</span>
		</span>
        </div>
        <div style="clear: right" class="bottom_space">&nbsp;</div>
      </el-tabs>

    </div>
  </div>
</template>

<script>
import { request} from "../network/request";
import joinus_1 from '../views/Joinus_1'
import joinus_2 from '../views/Joinus_2'
import joinus_3 from '../views/joinus_3'
import joinus_4 from '../views/joinus_4'
import {Post, puget} from "../network/request";
import axios from "axios";

export default {
  name: "Joinus",
  data() {
    return {
      msg: '这里是注册成为发行商页面，内容包含5步注册步骤',
      activeName: '0',
      nextMsg: '继续',
      publisher:{},
      isChecked:false,
      payment:this.loadpayment(),

    }
  },
  methods: {
    loadpayment(){
      axios.get('https://localhost:5001/api/Publisher/PublisherPayment').then(res => {
        this.payment = res.data;
        // console.log(res.data);
      }).catch(err => {
        console.log(err)
      })
      // request({
      //   url:`/api/Publisher/PublisherPayment`,
      //   method: 'post',
      // }).then(res=>{
      //   console.log(res.data)
      //   $("#testBox").html(res.data)
      // }).catch(err=>{console.log(err)})
    },
    tabClick(tab, event) {
      if (this.activeName !== '4') {
        this.nextMsg = '继续';
      } else {
        this.nextMsg = '提交';
      }
      console.log(this.activeName);
    },
    Next() {//点击继续时
      if(parseInt(this.activeName) === 1){
        if(!this.Checkpublisher()){
          return;
        }
      }
      if(parseInt(this.activeName) === 2){
        if(!this.CheckisChecked()){
          return;
        }
      }

      if (parseInt(this.activeName) <= 3) {
        let ac = parseInt(this.activeName);
        ac++;
        this.activeName = ac.toString();
        console.log(this.activeName);
      }
      if (parseInt(this.activeName) > 3) {
        if (this.nextMsg === '提交') {
          // this.$message.success('你点击了提交')
          // console.log(this.$refs.joinus2.Publisher);
          if(this.CheckAll()){
            this.$message.success('成功提交');
          }
        } else {
          this.$message('最后一项了')
          this.nextMsg = '提交';
          return;
        }
      }
    },
  CheckAll(){
    if(!this.Checkpublisher()){
      return false;
    }
    if(!this.CheckisChecked()){
      return false;
    }

    return true;
  },
    Checkpublisher() {
      this.publisher = this.$refs.joinus2.Publisher;
      let p = this.publisher;
      if (p.Company === '' || p.Address === '' || p.Postcode === '' || p.MailboxLanguage === '') {
        this.$message.error('请把您的信息补充完整！');
        return false;
      }
      return true;
    },
    CheckisChecked(){
      this.isChecked = this.$refs.joinus3.isChecked;
      if(!this.isChecked){
        this.$message.error('请先同意 NDA保密协议 ！');
        return false;
      }
      return true;
    }
  },
  components: {
    joinus_1,joinus_2,joinus_3,joinus_4,
  }
}
</script>

<style scoped>
.steamworks_direct_header_ctn {
  background: -webkit-linear-gradient(325deg, #407999 5%, #2A3E59 95%);
  background: linear-gradient(125deg, #407999 5%, #2A3E59 95%);
  height: 160px;
}

.steamworks_direct_header {
  background: url('../assets/steamworks_cubes_1.png') left 0px no-repeat;
  height: 160px;
  color: #fff;
  font-size: 29px;
  font-family: "Motiva Sans", Sans-serif;
  font-weight: 300;
  position: relative;
  max-width: 1280px;
  min-width: 800px;
  margin: 0 auto;
  padding: 50px 0px 0px 46px;
}

.el-tabs--border-card {
  background: rgba(255, 255, 255, 0);
  border: 0;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 0 6px 0 rgba(0, 0, 0, 0);
  margin: 0 auto;
  width: 1280px;
}

.page_controls {
  float: right;
  margin-bottom: 20px;
  margin-top: 16px;
  border-top: 1px solid #82a6d7;
  width: 100%;
  text-align: right;
  padding-top: 8px;
}

.btn_green_white_innerfade {
  border-radius: 2px;
  border: none;
  padding: 1px;
  display: inline-block;
  cursor: pointer;
  text-decoration: none !important;
  color: #D2E885 !important;
  background: #a4d007;
  /*background: -webkit-linear-gradient( top, #a4d007 5%, #536904 95%);*/
  background: linear-gradient(to bottom, #a4d007 5%, #536904 95%);
}

.btn_green_white_innerfade span {
  padding: 0 15px;
  font-size: 1.3em;
}

</style>
